<template>
	<div class="collect-container">
        <!-- 导航栏组件 -->
        <TmallNavBar>
            <template #left><i class="icon iconfont icon-zuojiantou"></i></template>
            <template #default>收藏店铺</template>
            <template #right><i class="icon iconfont icon-shouye1" @click="$router.push({path: '/'})"></i></template>
        </TmallNavBar>

        <!-- 店铺数据 -->
        <div class="scroll">
            <div>
                <!-- 骨架屏 -->
                <van-skeleton v-if="isLoading">
                    <template #template>
                        <div class="shop-list">
                            <div class="shop-item" v-for="(item) in skeletonLength" :key="item" >
                                <div class="image-box" style="margin-bottom: 5px;">
                                    <van-skeleton-image class="thumb" style="width: 100%;"/>
                                </div>
                                <div>
                                    <van-skeleton-paragraph style="height: 30px;"/>
                                    <van-skeleton-paragraph row-width="40%"/>
                                </div>
                            </div>
                        </div>
                    </template>
                </van-skeleton>

                <div v-else>
                    <!-- 店铺列表 -->
                    <div class="shop-list" v-if="shopCollectList.length > 0">
                        <div @click="$router.push('/shopDetail?shop_id='+item.shop_id)" class="shop-item" v-for="item in shopCollectList" :key="item.shop_id">

                            <!-- 封面 -->
                            <img class="image" v-img-lazy="global.MINIO_FILE_DOMAIN + item.shop_cover_url" />

                            <!-- 店铺名称 -->
                            <div class="name">{{ item.shop_name }}</div>

                            <!-- 价格 -->
                            <div class="price">
                                <span class="symbol">¥</span>
                                <span class="number">{{ (item.shop_price/100).toFixed(2) }}</span>
                            </div>
                        </div>
                    </div>

                    <!-- 空状态 -->
                    <div class="blank" v-else>
                        <van-image :src="blankImage" class="image" />
                        <span class="text">您还没有收藏店铺哟~</span>
                        <van-button class="button" to="/">去首页看看</van-button>
                    </div>
                </div>

                <!-- 加载文本 -->
                <div class="loading-text" v-if="queryParams.page_size < total">
                    {{ finish ? '我也是有底线的~' : '正在加载...' }}
                </div>
            </div>
        </div>

        <div style="margin-bottom: 10px;"></div>

        <!-- 返回顶部组件 -->
        <TmallBackTop :bottom="120"  @backTop="backTop" v-if="isShowBackTop" />
    </div>
</template>

<script setup>
import { ref, reactive, onMounted, inject } from "vue"
import { reqUserShopCollectListAPI } from "@/apis/shopCollect"
import BScroll from 'better-scroll'
import blankImage from '@/assets/images/blank.png'

// 全局属性
const global = inject('global')


// ----------------------- 返回顶部功能开始 -----------------------
const backTop = () => {
    bscroll.scrollTo(0, 0, 500)
}
// ----------------------- 返回顶部功能结束 -----------------------






// --------------------- 获取店铺收藏列表功能开始 ---------------------
const skeletonLength = ref(8)

// 定义店铺收藏列表
const shopCollectList = ref([])

// 定义店铺总页数
const totalPage = ref(0)

const total = ref(0)

// 请求参数
const queryParams = reactive({
	page: 1,
	page_size: 10
})

// 是否加载
const isLoading = ref(false)

// 获取店铺收藏列表
const getShopCollectList = async () => {
// 	if (finish.value == true) {
//         return
//     }
  
// 	// 请求数据
// 	const result = await reqUserShopCollectListAPI(queryParams)
// 	let shopCollects = result.data.user_shop_collects != null ? result.data.user_shop_collects : []
//   shopCollectList.value.push(...shopCollects)
// 	totalPage.value = result.data.page_total
//     total.value = result.data.total

//     if (queryParams.page < result.data.page_total) {
//         queryParams.page++
//     } else {
//         finish.value = true
//     }
}
// --------------------- 获取店铺收藏列表功能结束 ---------------------



let bscroll = reactive({})
// 是否显示返回顶部按钮
const isShowBackTop = ref(false)
onMounted(async() => {
    isLoading.value = true
	// await getShopCollectList()
    isLoading.value = false

    bscroll = new BScroll(document.querySelector('.scroll'), {
        probeType: 3,
        click: true,
        pullUpLoad:true,
        pullDownRefresh: true, //开启下拉刷新
    })

    // 加载更多
    bscroll.on('pullingUp', pullingUpHandler)

    //监听下拉刷新
    bscroll.on("pullingDown", pullingDownHandler)

    // 监听滚动
    bscroll.on('scroll',(position) => {
        isShowBackTop.value = -position.y > 70;
    });
})




// --------------------- 加载更多功能开始 ---------------------
// 完成标识
const finish = ref(false)
// 滚动触底
const pullingUpHandler = () => {
    getShopCollectList()
    bscroll.finishPullUp()
    bscroll.refresh()
}
// --------------------- 加载更多功能结束 ---------------------





// ---------------------下拉刷新功能开始 ---------------------
const pullingDownHandler = async () => {
    if (shopCollectList.value.length == 0) {
        return false
    }

    isLoading.value = true
    // 重置数据
    queryParams.page = 1
    queryParams.page_size = 10
    shopCollectList.value = []
    finish.value = false

    // 同时请求
    await getShopCollectList()

    bscroll.finishPullDown()
    isLoading.value = false
}
// ---------------------下拉刷新功能结束 ---------------------
</script>

<style scoped lang="scss">
.collect-container {
    display: flex;
    flex-direction: column;
    width: 100%;
    position: fixed;
    background-color: ghostwhite;
    margin-top: 45px;
    .scroll {
        height:calc(100vh - 50px);
        .shop-list {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            padding: 0 10px 10px;
            .shop-item {
                width: 48%;
                padding: 10px;
                margin-top: 10px;
                border-radius: 5px;
                background-color: #fff;
                .image {
                    width: 154px;
                    height: 154px;
                }
                .name {
                    height: 30px;
                    font-size: 13px;
                
                    overflow:hidden;
                    text-overflow:ellipsis;
                    display:-webkit-box;
                    -webkit-box-orient:vertical;
                    -webkit-line-clamp:2;
                }
                .price {
                    margin-top: 8px;
                    line-height: 1;
                    color: #cf4444;
                    font-size: 15px;
                }
                .symbol {
                    font-size: 70%;
                }
                .decimal {
                    font-size: 70%;
                }
            }
        }
        .loading-text {
            text-align: center;
            font-size: 14px;
            color: #666;
            padding: 10px 0 25px;
        }
        
        // 空状态
        .blank {
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            height: 60vh;
            .image {
                width: 200px;
                height: 141px;
            }
            .text {
                color: #444;
                font-size: 13px;
                margin: 10px 0;
            }
            .button {
                width: 120px !important;
                height: 30px;
                line-height: 30px;
                margin-top: 10px;
                font-size: 13px;
                border-radius: 30px;
                color: #fff;
                background-color: #27ba9b;
            }
        }
    }
}
</style>